<template>
    <div>
        <el-card class="mb">
            <el-input placeholder="请输入关键词搜索" v-model="queryform.dictType"
                style="width: 200px;margin-right: 10px;"></el-input>
            <el-button type="primary" @click="search()" plain>查询</el-button>
            <el-button type="info" @click="research()" plain>重置</el-button>
            <el-button type="warning" style="float:right" @click="add()" plain>新增</el-button>

        </el-card>
        <el-card>
            <div class="table">
                <el-table :data="tableData" strip >

                    <el-table-column type="index" width="100" label="序号" align="center" sortable></el-table-column>



                    <el-table-column prop="dictType" label="参数类型">

                    </el-table-column>
                    <el-table-column prop="dictLabel" label="参数label">

                    </el-table-column>
                    <el-table-column prop="dictValue" label="参数value">

                    </el-table-column>


                    <el-table-column label="操作" align="center" width="180" fixed="right">
                        <template v-slot="scope">
                            <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>

                            <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>


                        </template>
                    </el-table-column>
                </el-table>

               
            </div>
            <div class="pagination">
                        <el-pagination background @current-change="handleCurrentChange"
                            :current-page="queryform.current" :page-sizes="[5, 10, 20]"
                            :page-size="queryform.pageSize" layout="total, prev, pager, next" :total="total">
                        </el-pagination>
                    </div>
        </el-card>

        <el-dialog title="系统参数" :visible.sync="fromVisible" width="60%" :close-on-click-modal="false" destroy-on-close>
            <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
                <el-form-item label="参数类型" prop="dictType">
                    <el-input placeholder="请输入参数类型" v-model="form.dictType"></el-input>
                </el-form-item>
                <el-form-item label="参数label" prop="dictLabel">
                    <el-input placeholder="请输入参数label" v-model="form.dictLabel"></el-input>
                </el-form-item>
                <el-form-item label="参数value" prop="dictValue">
                    <el-input placeholder="请输入参数value" v-model="form.dictValue"></el-input>
                </el-form-item>
               
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="fromVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="公告内容" :visible.sync="fromVisible1" width="60%" :close-on-click-modal="false" destroy-on-close>
            <div v-html="newscontent" style="width: 100%;overflow: auto;"></div>
        </el-dialog>
    </div>
</template>
<script>
import service from '@/request';
import E from 'wangeditor';
export default {
    data() {
        return {
            fileList: [],
            tableData: [],  // 所有的数据
            current: 1,   // 当前的页码
            pageSize: 10,  // 每页显示的个数
            total: 0,
            editor: null,
            username: null,
            token: "",
            name: null,
            fromVisible: false,
            fromVisible1: false,
            newscontent: "",
            avatar: "",
            queryform: {
                current: 1,
                pageSize: 10
            
            },
            license: "",
            form: {
                avatar: "",
                license: ""
            },
            user: {},
            rules: {

                cname: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                ],

                // business_id: [
                //     { required: true, message: '请选择用户类型', trigger: 'blur' },
                // ]
            },
            ids: [],
            sjlist: [],
        }
    },
    mounted() {
        this.token = window.localStorage.getItem("token")
        this.user = JSON.parse(window.localStorage.getItem("userinfo"))

        this.getlist()
    },
    methods: {
        djck(c) {
            this.fromVisible1 = true;
            this.newscontent = c
        },

        initWangEditor(content) { //用户输入的文本作为参数传进函数。
            this.$nextTick(() => { //1.dom元素加载好后，先判断editor是否已经完成初始化，如果已经完成初始化，那么把editor销毁，清空。
                if (this.editor) {
                    this.editor.destroy();
                    this.editor = null;
                }
                this.editor = new E('#editor') //2.新建一个editor，赋值给我们一开始定义的editor，并渲染在iD为#editor的元素里
                this.editor.config.placeholder = '请输入内容' // 配置编辑器默认展示的文本
                this.editor.config.uploadFileName = 'file' //配置编辑器文件上传的名称
                this.editor.config.uploadImgServer = '/oss/editor'  //配置编辑器文件上传的接口
                this.editor.config.uploadImgHeaders = {
                    Authorization: 'Bearer ' + localStorage.getItem('token') // 设置请求头
                }  //配置编辑器文件上传的接口
                this.editor.config.uploadImgHeaders = {
                    Authorization: 'Bearer ' + localStorage.getItem('token') // 设置请求头
                }
                this.editor.create() //执行创建编辑器
                console.log("12345")
                setTimeout(() => { //延时函数，这里没有设置延时时间，即为实时获取编辑器的文本给到this.editor.txt.html()。
                    this.editor.txt.html(content)
                })

            })
        },

        handleFileSuccess(e) {
            console.log(e)
            this.form.img = e.data

        },
        shenhe(id, f) {
            this.$confirm(`是否确认${f}?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await service.put("/news", {
                    id: id,
                    status: f
                })
                console.log(res)
                if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                    this.getlist()
                }

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        del(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await service.delete("/notice/" + id)
                console.log(res)
                if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getlist()
                }

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        force(e) {
            this.form.timeRange = e;
            this.$forceUpdate();
        },
        handleEdit(row) {
            this.form = JSON.parse(JSON.stringify(row));;
           
            this.fromVisible = true

        },
        search() {

            this.getlist()
        },
        research() {
            delete this.queryform.dictType
            this.getlist()

        },
        async getlist() {

            const res = await service.get("/sys/dict/data/page", { params: this.queryform });
            console.log(res);
            if (res.code == 200) {
                this.tableData = res.data.records;
                this.total=res.data.total
             
            }


        },
        add() {

            this.form = {


            }
            setTimeout(() => {
                this.initWangEditor("")

            }, 3000)

            this.fromVisible = true

        },
        handleLicenseSuccess(e) {

        },
        async save() {
          
            // this.form.userId=this.user.id
            // this.form.status="通过"
            if (!this.form.id) {
                const res = await service.post("/sys/dict/data", this.form);
                if (res.code == 200) {
                    this.fromVisible = false
                    this.$message({
                        type: 'success',
                        message: '操作成功', duration: 1000
                    });
                    this.getlist()
                }
            } else {
                const res = await service.put("/sys/dict/data", this.form);
                if (res.code == 200) {
                    this.fromVisible = false
                    this.$message({
                        type: 'success',
                        message: '操作成功', duration: 1000
                    });
                    this.getlist()
                }
            }




        },
        handleCurrentChange(e) {
            console.log(e)
            this.queryform.current = e;
            this.getlist()
        },
        handleAvatarSuccess(e) {
            console.log(e)
            console.log(this.form.img)
            this.form.img = e.data;
            console.log(this.form.avatar)
        },
        handleAvatarSuccess1(e) {

            this.license = e.data;
        }
    }
}
</script>
<style scoped>
.mb {
    margin-bottom: 10px;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px !important;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
